<clr-datagrid
    (clrDgRefresh)="clrLoad($event)"
    [clrDgLoading]="loading"
    [(clrDgSelected)]="selectedRow"
    (clrDgSelectedChange)="selectionChanged()">
    <clr-dg-action-bar>
        <button
            type="button"
            class="btn btn-secondary"
            (click)="addNewProject()"
            *ngIf="projectCreationRestriction">
            <clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{
                'PROJECT.NEW_PROJECT' | translate
            }}
        </button>
        <clr-dropdown
            [clrCloseMenuOnItemClick]="false"
            class="btn btn-link"
            clrDropdownTrigger>
            <span
                >{{ 'MEMBER.ACTION' | translate
                }}<clr-icon
                    shape="caret
            down"></clr-icon
            ></span>
            <clr-dropdown-menu *clrIfOpen>
                <button
                    [disabled]="!hasPermission || !canClickExport"
                    clrDropdownItem
                    (click)="exportCVE()">
                    <clr-icon shape="export" size="16"></clr-icon>&nbsp;
                    <span id="export-cve">{{
                        'CVE_EXPORT.EXPORT_SOME_PROJECTS' | translate
                    }}</span>
                </button>
                <div class="dropdown-divider"></div>
                <button
                    id="delete-project"
                    type="button"
                    class="btn btn-secondary"
                    [disabled]="!canDelete"
                    (click)="deleteProjects(selectedRow)">
                    <clr-icon shape="times" size="16"></clr-icon>&nbsp;
                    <span>{{ 'PROJECT.DELETE' | translate }}</span>
                </button>
            </clr-dropdown-menu>
        </clr-dropdown>
    </clr-dg-action-bar>
    <clr-dg-column [clrDgSortBy]="'name'">{{
        'PROJECT.NAME' | translate
    }}</clr-dg-column>
    <clr-dg-column>{{ 'PROJECT.ACCESS_LEVEL' | translate }}</clr-dg-column>
    <clr-dg-column>{{ 'PROJECT.ROLE' | translate }}</clr-dg-column>
    <clr-dg-column>{{ 'PROJECT.TYPE' | translate }}</clr-dg-column>
    <clr-dg-column>{{ 'PROJECT.REPO_COUNT' | translate }}</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="'creation_time'">{{
        'PROJECT.CREATION_TIME' | translate
    }}</clr-dg-column>
    <clr-dg-row *ngFor="let p of projects" [clrDgItem]="p">
        <clr-dg-cell>
            <a
                href="javascript:void(0)"
                [routerLink]="getLink(p.project_id)"
                (click)="clickLink(p.project_id)"
                >{{ p.name }}</a
            >
        </clr-dg-cell>
        <clr-dg-cell>{{
            (p.metadata.public === 'true'
                ? 'PROJECT.PUBLIC'
                : 'PROJECT.PRIVATE'
            ) | translate
        }}</clr-dg-cell>
        <clr-dg-cell>{{
            roleInfo[p.current_user_role_id]
                ? (roleInfo[p.current_user_role_id] | translate)
                : '-'
        }}</clr-dg-cell>
        <clr-dg-cell>{{
            projectTypeMap[p.registry_id ? 1 : 0] | translate
        }}</clr-dg-cell>
        <clr-dg-cell>{{ p.repo_count }}</clr-dg-cell>
        <clr-dg-cell>{{
            p.creation_time | harborDatetime : 'short'
        }}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>
        <clr-dg-pagination
            #pagination
            [clrDgPageSize]="pageSize"
            [(clrDgPage)]="currentPage"
            [clrDgTotalItems]="totalCount">
            <clr-dg-page-size [clrPageSizeOptions]="[15, 25, 50]">{{
                'PAGINATION.PAGE_SIZE' | translate
            }}</clr-dg-page-size>
            <span *ngIf="totalCount"
                >{{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }}
                {{ 'PROJECT.OF' | translate }}
            </span>
            {{ totalCount }} {{ 'PROJECT.ITEMS' | translate }}
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>
<export-cve (triggerExportSuccess)="triggerExportSuccess()"></export-cve>
